<template>
  <div id="app">
    <!-- <p>这里是App页面</p>
    <button @click="toChild">向child发消息</button>
    <m-parent :appMsg="a" :appMsgB="b" :appMsgC="c" @click="toApp"></m-parent>
    <p>
      <RouterLink to="home">Home</RouterLink>
    </p>
    <p><button @click="toHome">toHome</button></p>
    <p><button @click="toChild">toChild</button></p> -->
    <router-view />
  </div>
</template>
<script>
// import MParent from "./views/Parent.vue";
import bus from "./utils/bus";
import { RouterLink } from "vue-router";
export default {
  components: {
    // MParent,
    RouterLink
},
  data() {
    /* 
    第三种传值方式：非父子组件之间传值方式，通过$attrs  / $listeners
    通过$attrs:
      在要传值的组件中定义值，如下data中的 a b c
      在要向下传值的组件中绑定属性 如上 m-parent <m-parent :appMsg="a" :appMsgB="b" :appMsgC="c"></m-parent>
      在parent组件中添加 v-bind="$attrs" 这个v-bind不能简写
      在child组件中使用this.$attrs接收传递过来的值
    */
    return {
      a: 'AppMsgA',
      b: 'AppMsgB',
      c: 'AppMsgC',
    }
  },
  methods: {
    toChild() {
      bus.$emit("appClick", "从app传递过来的消息");
    },
    toApp(val){
      console.log(val)
      console.log('listeners',this.$listeners);
    },
    toHome(){
      // this.$router.push('home')
      // this.$router.push({path:'/home'} )
      // this.$router.push({path:'/home/234'} )
      // this.$router.push({path:'/home',query:{id:33}} )
      this.$router.push({name:'home',params:{id:'wja'}} )

    },
    toChild(){
      this.$router.push('child')
    }
  }
};
</script>
<style></style>
